﻿@page "/prints"

<h3>Print 打印组件</h3>

<h4>用于打印文档或者局部视图</h4>

<Tips class="mt-3">
    <ul class="ul-demo">
        <li>设置 <code style="margin-left: 14px;">PreviewUrl</code> 时，单开一个新网页进行打印预览，点击此页面的打印按钮进行网页打印</li>
        <li>不设置 <code>PreviewUrl</code> 时，如果是 <code>Dialog</code> 组件中的打印按钮，则打印弹窗内容</li>
    </ul>

    <div><b>打印弹窗</b>时由于仅打印弹窗内容，所以对 <code>_Host.cshtml/index.html</code> 页面有所要求，代码如下；<code>blazor</code> 生成的代码使用 <code>app</code> 进行包裹方便打印时隐藏这部分</div>
</Tips>

<Pre>&lt;body&gt;
    &lt;app&gt;
        @@(await Html.RenderComponentAsync&lt;App&gt;(RenderMode.ServerPrerendered))
    &lt;/app&gt;
&lt;/body&gt;</Pre>

<Pre>&lt;PrintButton Icon="fa fa-print" Text="打印" PreviewUrl="/printview" /&gt;</Pre>

<DemoBlock Title="普通用法" Introduction="通过点击打印按钮将页面进行打印" Name="PrintButton">
    <p>点击下方打印按钮后，弹出新页面进行打印预览，确认无误后点击打印预览页面中的打印按钮进行打印机选择进行打印操作</p>
    <PrintButton Icon="fa fa-print" Text="打印" PreviewUrl="/printview" />
</DemoBlock>

<DemoBlock Title="打印弹窗" Introduction="通过设置弹窗组件 <code>ShowPrint</code> 开启打印功能" Name="PrintDialog">
    <p>本例中弹窗内容为自定义组件 <code>@nameof(DataDialogComponent)</code> 弹窗自身按钮所在 <code>Footer</code> 被隐藏，所以弹窗内置的 <code>Print</code> 按钮无法显示，设置 <code>@nameof(DialogOption.ShowPrintButtonInHeader)</code> 使 <b>打印</b> 按钮显示在标题栏中</p>
    <Button Icon="fa fa-print" Text="打印" OnClick="OnClickPrint" />
</DemoBlock>

<DemoBlock Title="打印服务" Introduction="通过设置要打印的内容组件，直接调用 <b>打印服务</b> 进行打印作业" Name="PrintService">
    <Button Icon="fa fa-print" Text="打印" OnClick="OnClickPrintService" />
</DemoBlock>
